<template>
  <el-dialog title="新增" :visible.sync="visible" width="70vw" top="8vh" @close="closeDialog">
    <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "收起" : "展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
            <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
                    label-width="130px">
              <div class="boxsty">
                <el-row>
                  <el-col :span="24">
                      <el-col :span="8">
                        <el-form-item label="合同名称" prop="contractName">
                          <el-input v-model="dataForm.contractName" placeholder="合同名称"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="16">
                        <el-form-item label="合同有效期" required>
                          <el-col :span="10">
                            <el-form-item prop="htYxqq">
                              <el-date-picker v-model="dataForm.htYxqq" type="date" value-format="yyyy-MM-dd"
                                            placeholder="开始日期" style="width: 100%"></el-date-picker>
                            </el-form-item>

                          </el-col>
                          <el-col :span="2">
                            <div class="text-center">至</div>
                          </el-col>
                          <el-col :span="10">
                            <el-form-item prop="htYxqz">
                            <el-date-picker v-model="dataForm.htYxqz" type="date" value-format="yyyy-MM-dd"
                                            placeholder="结束日期" style="width: 100%"></el-date-picker>
                            </el-form-item>
                          </el-col>
                        </el-form-item>
                      </el-col>
                  </el-col>
                  <el-col :span="24">
                    <el-col :span="8">
                      <el-form-item label="审批流程" prop="auditProcess">
                        <el-select v-model="dataForm.auditProcess" placeholder="请选择审批流程" class="xiaLa" style="width:100%" :clearable="true">
                          <el-option v-for="(item,index) in lcspList" :key="index" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="签订日期" prop="signDate">
                        <el-date-picker v-model="dataForm.signDate" type="date" value-format="yyyy-MM-dd"
                                        placeholder="签订日期" style="width: 100%"></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="签订级别" prop="signLevel">
                        <el-select v-model="dataForm.signLevel" placeholder="请选择签订级别" class="xiaLa" style="width:100%" :clearable="true">
                          <el-option v-for="(item,index) in qdjbList" :key="index" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-col>
                  <el-col :span="24">
                      <el-col :span="8">
                        <el-form-item label="多人合同模式" prop="multiMode">
                          <el-select v-model="dataForm.multiMode" placeholder="请选择多人合同模式" class="xiaLa" style="width:100%" :clearable="true">
                            <el-option v-for="(item,index) in drhtmsList" :key="index" :label="item.name" :value="item.value"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="考核周期" prop="contractCycle">
                          <el-select v-model="dataForm.contractCycle" placeholder="请选择考核周期" class="xiaLa" style="width:100%" :clearable="true">
                            <el-option v-for="(item,index) in htzqList" :key="index" :label="item.name" :value="item.value"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                  </el-col>

                </el-row>
              </div>
            </el-form>
           </div>
    </div>

<div class="mg-t20">
  <el-row>
    <el-col :span="12">
      <div>
        <div>
          <el-button type="primary" @click="addUser('fy')">发约人管理</el-button>
          <!-- <el-button type="primary" >导入发约人</el-button> -->
        </div>
        <el-table
          style="width: 80%;margin-top:20px"
          :data="fayuerendataList"
          border>
          <el-table-column
            prop="fayueName"
            header-align="center"
            align="center"
            label="发约人姓名">
          </el-table-column>
          <el-table-column
            prop="fayueZhiwu"
            header-align="center"
            align="center"
            min-width="180"
            label="发约人职务">
            <template  slot-scope="scope">
              <span>{{validatenull(scope.row.fayueZhiwu)?'-':scope.row.fayueZhiwu}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-col>
    <el-col :span="12">
      <div title="受约人">
        <div style="height:32px;">
          <el-button type="primary"  v-if="!isbtnHidden&&showPrise"  @click="addUser('sy')">受约人管理  </el-button>
          <el-button type="primary"  v-if="!isbtnHidden&&showRentPrise"  @click="addUser('jg')">机构管理  </el-button>
          <!-- <el-button type="primary" v-if="!isbtnHidden"  >导入受约人</el-button> -->
          <span  class="mg-l10" v-if="!isbtnHidden" >
              <el-radio v-model="radio"  label="1">个人</el-radio>
              <el-radio v-model="radio"  label="2">机构</el-radio>
          </span>
        </div>

          <el-table
            v-if="showPrise"
          style="width: 80%;margin-top:20px"
          :data="shouyuerendataList"
          border>
          <el-table-column
            prop="shouyueName"
            header-align="center"
            align="center"
            label="受约人姓名">
          </el-table-column>
          <el-table-column
            prop="shouyueZhiwu"
            header-align="center"
            align="center"
            min-width="180"
            label="受约人职务">
            <template  slot-scope="scope">
              <span>{{validatenull(scope.row.shouyueZhiwu)?'-':scope.row.shouyueZhiwu}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

        <el-table
          v-if="showRentPrise"
          style="width: 80%;margin-top:20px"
          :data="jigoudataList"
          border>
          <el-table-column
            prop="jigouName"
            header-align="center"
            align="center"
            label="机构名称">
          </el-table-column>
        </el-table>
<!--      </div>-->

    </el-col>
  </el-row>
</div>
<!--    发送指标部门-->
    <el-dialog title="请选择指标拟定部门" :close-on-click-modal="false" :visible.sync="zbvisible" append-to-body>
      <div style="height: 50vh">
<el-row>
  <el-col :span="8">
    <div class="text-center">
    <el-tree
      :data="treeOrgData"
      show-checkbox
      node-key="id"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="[5]"
      :props="defaultProps"
      @check-change="handleCheckChange">
    </el-tree>
    </div>
  </el-col>
  <el-col :span="4">
    <div class="text-center" style="line-height: 50vh">
      <el-button type="primary" @click="fnConfirmSelectedData">选择机构<i class="el-icon-d-arrow-right el-icon--right"></i></el-button>
    </div>
  </el-col>
  <el-col :span="10">
    <div class="text-center">
      <el-table
        :data="confirmTreeData"
        border>
        <el-table-column
          prop="label"
          header-align="center"
          align="center"
          label="机构名称">
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="danger" plain size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-col>
</el-row>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="zbvisible = false">返回#</el-button>
      <el-button type="primary" @click="zbvisible = false">推送</el-button>
    </span>

    </el-dialog>
    <!--  选择人员信息-->
    <UserCommonSelect v-if="usercomment" ref="usercomment" @refreshDataList="getDataList" @submitfy="submitfy" ></UserCommonSelect>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="closeDialog">返回#</el-button>
      <el-button type="primary" plain @click="addDateHT">保存#</el-button>
      <el-button type="primary">发送指标部门#</el-button>
      <el-button type="primary">维护指标#</el-button>
    </span>
  </el-dialog>
</template>

<script>

import { selHzBmList } from '@/api/ceping/cepinghzgldxpzb'
import UserCommonSelect from '@/views/hetongrenwu/components/usercomment-select'
import zhibiaoForm from '@/views/hetongrenwu/components/zhibiao-form.vue'
import { getNiDingList,saveHtong } from '@/api/hetongrenwu/hetongyeji/hetongnd-sp'
import { validatenull } from "@/util/validate";

export default {
  components: {
    UserCommonSelect,
    zhibiaoForm
  },
  data() {
    var checkDate=(rule, value, callback)=>{
      if(value){
         if(new Date(value.replace(/-/g,"\/")) < new Date(this.dataForm.htYxqq.replace(/-/g,"\/"))){
           callback('结束日期不能小于开始日期!')

         }else{
            callback()
         }
      }else{
        callback('请选择结束日期')
      }
    }
    var checkDateKai=(rule, value, callback)=>{
      if(value){
         if(new Date(value.replace(/-/g,"\/")) > new Date(this.dataForm.htYxqz.replace(/-/g,"\/"))){
            callback('开始日期不能大于结束日期!')
         }else{
           callback()
         }
      }else{
        callback('请选择开始日期')
      }
    }
    return {
      isbtnHidden:false,
      xgBz: false,
      visible: false,
      radio:'1',
      canSubmit: false,
      showPrise:true, // 受约人DIV
      showRentPrise:false, // 机构DIV
      cityOptions: [],
      jjData: [],//奖金池
      jjxList: [],//奖金项list
      fzbmData: [],
      dataForm: {},
      dataRule: {
        contractName: [
          {required: true, message: '合同名称不能为空', trigger: 'blur'}
        ],
        htYxqq:[
          {validator:checkDateKai, trigger: 'change'}
        ],
        htYxqz:[
          {validator:checkDate, trigger: 'change'}
        ],
        auditProcess:[
           {required: true, message: '请选择审批流程', trigger: 'change'}
        ],
        signDate:[
          {required: true, message: '请选择签订日期', trigger: 'change'}
        ],
        signLevel:[
          {required: true, message: '请选择签订级别', trigger: 'change'}
        ],
        multiMode:[
          {required: true, message: '请选择多人合同模式', trigger: 'change'}
        ],
        contractCycle:[
          {required: true, message: '请选择考核周期', trigger: 'change'}
        ],

      },
      lcspList:[
        {name:'业绩合同流程',value:'yjhtzbsh'},
        {name:'2021年全员绩效考核通用流程',value:'1'},
        {name:'2021年第一季度技术合同流程',value:'2'}
      ],
      qdjbList:[
        {name:'一级合同',value:'1'},
        {name:'二级合同',value:'2'},
        {name:'三级合同',value:'3'},
        {name:'四级合同',value:'4'},
        {name:'五级合同',value:'5'}
      ],
      drhtmsList:[
        {name:'多人共享成绩',value:'0'},
        {name:'生成多个合同',value:'1'}
      ],
      htzqList:[
        {name:'月度',value:'1'},
        {name:'季度',value:'2'},
        {name:'年度',value:'3'}
      ],
      fayuerendataList:[],
      shouyuerendataList:[],
      jigoudataList:[],
      zbvisible:false,
      treeOrgData:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      confirmTreeData:[
        {
          id: 5,
          label: '二级机构'
        }
      ],
      selectedTreeData:[],
      usercomment:false,
      searchadvanced: true,
      searchheight: '0',
      jsonData:''
    }
  },
  watch: {
    radio(value){
      if(value){
        this.cheakDiv(value);
      }
    },
  },
  created() {
    this.getTreeData()
  },
  methods: {
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if(this.searchadvanced){
        this.searchheight= 'auto'
      }
    },
    //移除数据项
    removeItem(index) {
      this.dataForm.dataList.splice(index, 1);
      this.jjxZehj();
    },
    //初始化
    csh() {
      this.xgBz = false;
      this.jjxList = [];
      this.jjData = [];
      this.cityOptions = [];
      this.dataForm = {
        contractName:""
      };
      this.isbtnHidden=false;
      this.fayuerendataList=[];
      this.shouyuerendataList=[];
      this.jigoudataList=[];
    },
    init(data) {
      this.visible = true;
      if(data != undefined){
        this.fayuerendataList=[];
        this.shouyuerendataList=[];
        this.jigoudataList=[];
        this.isbtnHidden = true;
        this.dataForm=data;
        this.fayuerendataList=JSON.parse(data.fayuejson);
        this.shouyuerendataList=JSON.parse(data.shouyuejson);
        this.jigoudataList=JSON.parse(data.jigoujson);
        this.cheakDiv(data.type);
        this.$forceUpdate();
      }else{
        //感觉这个方法不用也行，暂时注释
        //this.csh();
      }
     // this.dataForm.id = JSON.stringify(data.id) || 0;
     // this.visible = true;
      this.canSubmit = true;
      this.getTreeData()
    },
    //树结构选中的数据
    handleCheckChange(data){
      this.selectedTreeData=data;
     ////console.log(JSON.stringify(this.selectedTreeData))
    },
    //确定选择选中得机构
    fnConfirmSelectedData(){
      this.confirmTreeData=this.selectedTreeData
    },
    //机构或受约人Div隐藏
    cheakDiv(type) {
      if(type == '1'){
        this.showPrise = true;
        this.showRentPrise = false;
      }else if(type =='2'){
        this.showPrise = false;
        this.showRentPrise = true;
      }
    },
    getDataList(data) {
      // selHzBmList('12').then(response => {
      //   this.itemData = response.data.data
      // })
    },
    //增加人员
    addUser(type) {
      this.usercomment = true;
      if(type=='fy'){
        //this.jsonData=this.dataForm.fayuejson;
        this.jsonData=JSON.stringify(this.fayuerendataList)
      }else if(type=='sy'){
        this.jsonData=JSON.stringify(this.shouyuerendataList)
       // this.jsonData=this.dataForm.shouyuejson;
      }else if(type=='jg'){
        this.jsonData=JSON.stringify(this.jigoudataList)
        // this.jsonData=this.dataForm.shouyuejson;
      }
      this.$nextTick(() => {
        //console.log("传参："+JSON.stringify(this.jsonData))
        this.$refs.usercomment.init('12',type,this.jsonData);
      });
    },
    addDateHT() {
      this.dataForm.fayuejson=JSON.stringify(this.fayuerendataList);
      this.dataForm.shouyuejson=JSON.stringify(this.shouyuerendataList);
      this.dataForm.jigoujson=JSON.stringify(this.jigoudataList);
      this.dataForm.type =this.radio;
      this.$refs['dataForm'].validate((valid) => {
      if (valid) {
            //console.log(this.dataForm)
            saveHtong(this.dataForm).then(res=>{
            this.$message.closeAll();
            this.$message.success('保存成功')
            this.closeDialog();
            this.$emit("refreash",'1')
            this.$refs.zhibiaoRef.saveZhibiao()

          })
          } else {
           //console.log('error submit!!');
            return false;
          }
        });

    },
    //打开指标维护
    fnOpenZhibiao(){
      var param={
        openZhi:true
      }
      this.$emit('openZhibiao',param)
    },
    submitfy(data){
      if(data.type =='fy'){
        this.fayuerendataList = data.tableDataUser;
      }else if(data.type =='sy'){
        this.shouyuerendataList = data.tableDataUser;
      }else if(data.type =='jg'){
        this.jigoudataList = data.tableDataUser;
      }
    },
    //获取树结构
    getTreeData(){
      getNiDingList().then(res=>{
        //console.log("数："+JSON.stringify(res))
        this.treeOrgData=res.data.data
      })
    },
    //判空
    validatenull(val){
      return validatenull(val)
    },
    //关闭当前页面的弹框
    closeDialog(){
      this.$emit("refreash",'closeDialog')
      this.visible=false;
    }
  }
}
</script>
<style scoped>
.el-divider {
  background-color: #fff
}
</style>
